<!--
 * @Author: your name
 * @Date: 2021-07-06 10:14:52
 * @LastEditTime: 2021-07-06 14:06:03
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \YsMinSystem\src\views\groupManagement\expressage.vue
-->
<template>
  <div class="expressage">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>基本设置</el-breadcrumb-item>
      <el-breadcrumb-item>字典管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="tab">
      <el-tabs v-model="activeName" @tab-click="getList">
        <el-tab-pane label="字典分组" name="0"></el-tab-pane>
        <el-tab-pane label="字典属性" name="1"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="query">
      <el-form label-width="70px" size="small">
        <el-form-item label="分组编码">
          <el-input
            v-model="form.groupId"
            placeholder="请输入分组编码"
          ></el-input>
        </el-form-item>
        <el-form-item label="分组名称" v-if="activeName == '0'">
          <el-input
            v-model="form.groupName"
            placeholder="请输入分组名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="字典名称" v-else>
          <el-input
            v-model="form.dictName"
            placeholder="请输入字典名称"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="getList" type="primary">搜索</el-button>
          <el-button @click="refreshCache" type="primary">刷新缓存</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div style="margin-top: 10px">
      <el-button size="small" type="primary" @click="addDictionaries"
        >添加</el-button
      >
    </div>
    <div class="tableContext">
      <el-table :data="tableData.list">
        <el-table-column
          prop="dictId"
          v-if="activeName == '1'"
          label="字典id"
        ></el-table-column>
        <el-table-column prop="groupId" label="分组编码"></el-table-column>
        <el-table-column
          v-if="activeName == '0'"
          prop="groupName"
          label="分组名称"
        ></el-table-column>
        <el-table-column
          prop="dictName"
          v-if="activeName == '1'"
          label="字典名称"
        ></el-table-column>
        <el-table-column label="创建时间">
          <template slot-scope="scope">
            {{ $moment(scope.row.createdTime) }}
          </template>
        </el-table-column>
        <el-table-column label="更新时间">
          <template slot-scope="scope">
            {{ $moment(scope.row.updatedTime) }}
          </template>
        </el-table-column>

        <el-table-column prop="remark" label="备注"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <span
              style="cursor: pointer; color: #409eff"
              @click="selectUpdate(scope.row)"
              >修改</span
            >
            <span
              style="cursor: pointer; margin-left: 10px; color: #409eff"
              @click="deleteUser(scope.row.id)"
              >删除</span
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="height: 60px"></div>
    <el-dialog
      append-to-body
      title="操作"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <div>
        <el-form label-width="70px">
          <el-form-item label="分组编码" v-if="activeName == '1'">
            <el-select placeholder="请选择分组编码" filterable clearable v-model="addForm.groupId">
              <el-option
                v-for="item in all"
                :label="item.groupName"
                :value="item.groupId"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="字典id" v-if="activeName == '1'">
            <el-input
              v-model="addForm.dictId"
              placeholder="请输入字典id"
            ></el-input>
          </el-form-item>
          <el-form-item v-if="activeName == '0'" label="分组">
            <el-input
              v-model="addForm.groupId"
              placeholder="请选择分组"
            ></el-input>
          </el-form-item>
          <el-form-item label="字典名称" v-if="activeName == '1'">
            <el-input
              v-model="addForm.dictName"
              placeholder="请输入字典名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="分组名称" v-if="activeName == '0'">
            <el-input
              v-model="addForm.groupName"
              placeholder="请输入分组名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input
              v-model="addForm.remark"
              placeholder="请输入备注"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </span>
    </el-dialog>
    <div class="page">
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="tableData.pageNo"
          :page-sizes="[10, 20, 50, 100, 200]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.totalNum"
          prev-text="上一页"
          next-text="下一页"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      activeName: '0',
      dialogVisible: false,
      tableData: {
        list: [],
        pageNo: 1,
        pageSize: 10,
        totalNum: 0
      },
      form: {
        groupId: '',
        groupName: '',
        dictId: '',
        dictName: ''
      },
      addForm: {
        groupId: '',
        groupName: '',
        remark: '',
        dictId: '',
        dictName: '',
        id: ''
      },
      pageSize: 10,
      all: []
    }
  },
  created () {
    this.getList()
    this.getListAll()
  },
  watch: {
    activeName: {
      handler (newVal, oldVal) {
        // console.log(newVal, oldVal)
        this.form.groupId = ''
        this.form.groupName = ''
        this.form.dictName = ''
      },
      deep: true
    }
  },
  methods: {
    // 刷新缓存
    refreshCache () {
      this.axios
        .get('/sys/v1/common/config/refresh', {
        })
        .then((res) => {
          if (res.code == 0) {
            console.log(res, 'res')
            this.$message.success('刷新成功！')
          }
        })
    },
    addDictionaries () {
      this.dialogVisible = true
      this.addForm = {}
    },
    add () {
      let url = 'sys/commonDictGroup/save'
      if (this.activeName == '1') {
        url = 'sys/v1/common/saveOrUpdate'
      }
      this.axios.post(url, this.addForm).then((res) => {
        if (res.code == 0) {
          this.getList()
          this.$message.success('操作成功!')
          this.dialogVisible = false
        } else {
          this.$message.error(res.message)
        }
      })
    },
    getListAll () {
      this.axios.get('sys/commonDictGroup/findAll').then((res) => {
        console.log(res)
        if (res.code == 0) {
          this.all = res.data
        } else {
          this.$message.error(res.message)
        }
      })
    },
    getList () { // 字典分组
      if (this.activeName == '0') {
        this.axios
          .get('sys/commonDictGroup/findByPage', {
            params: {
              groupId: this.form.groupId.trim(),
              groupName: this.form.groupName.trim(),
              pageNo: this.tableData.pageNo,
              pageSize: this.tableData.pageSize
            }
          })
          .then((res) => {
            if (res.code == 0) {
              this.tableData = res.data
            } else {
              this.$message.error(res.message)
            }
          })
      } else {
        this.axios
          .post('sys/v1/common/finByPage', {
            dictName: this.form.dictName.trim(),
            groupId: this.form.groupId.trim(),
            pageNo: this.tableData.pageNo,
            pageSize: this.pageSize
          })
          .then((res) => {
            if (res.code == 0) {
              this.tableData = res.data
            } else {
              this.$message.error(res.message)
            }
          })
      }
    },
    selectUpdate (row) {
      console.log(row)
      this.dialogVisible = true
      this.addForm.groupName = row.groupName
      this.addForm.remark = row.remark
      this.addForm.dictId = row.dictId
      this.addForm.dictName = row.dictName
      this.addForm.id = row.id
      this.addForm.groupId = row.groupId

      // this.addForm = row
      // this.axios.get("sys/commonDictGroup/findById?id=" + id).then((res) => {
      //   console.log(res)
      //   if (res.code == 0) {
      //     this.addForm = res.data;
      //     this.dialogVisible = true;
      //   } else {
      //     this.$message.error(res.message);
      //   }
      // });
    },
    deleteUser (id) {
      let url = 'sys/commonDictGroup/delete?id='
      if (this.activeName == '1') {
        url = 'sys/v1/common/deleteById?id='
      }
      this.axios.get(url + id).then((res) => {
        if (res.code == 0) {
          this.getList()
          this.$message.success('删除成功')
        } else {
          this.$message.error(res.message)
        }
      })
    },
    handleSizeChange (e) {
      this.pageSize = e
      this.getList()
    },
    handleCurrentChange (e) {
      this.tableData.pageNo = e
      this.getList()
    },
    handleClick (e) { }
  }
}
</script>
<style lang="scss" scoped>
.expressage {
  .tab {
    margin-top: 10px;
    background: #fff;
    padding: 0px 20px;
    border-radius: 5px;
    /deep/.el-tabs__header {
      margin: 0;
    }
  }

  .tableContext {
    margin-top: 10px;
    .table_column_font {
      width: 100px;
      color: #4168e7;
      display: flex;
      justify-content: flex-start;
      span {
        margin: 0px 5px;
        cursor: pointer;
        white-space: nowrap;
      }
    }
    /deep/.cell {
      display: flex;
      justify-content: center;
    }
  }
  .page {
    padding-right: 20px;
    text-align: right;
    width: 98%;
    position: fixed;
    bottom: 0;
    right: 0;
    background: #fff;
    z-index: 100;

    span {
      font-size: 15px;
      color: #666;
      display: inline-block;
      margin-left: 10px;
      vertical-align: middle;
    }

    .el-pagination {
      display: inline-block;
      vertical-align: middle;
    }

    /deep/.el-input--suffix .el-input__inner {
      background: #fff;
      color: #000;
      width: 104px;
      box-shadow: none;
    }
  }

  .query {
    background: #fff;
    margin-top: 10px;
    padding: 10px 00px;
    /deep/.el-form {
      display: flex;
      flex-wrap: wrap;
      /deep/.el-input__inner {
        width: 220px;
      }
      /deep/ .el-form-item label:after {
        content: "";
        display: inline-block;
        width: 100%;
      }
      /deep/ .el-form-item__label {
        text-align: justify;
        height: 50px;
      }
      /deep/.el-form-item {
        margin-right: 10px;
      }
    }
  }
}
</style>
